<template>
  <div v-if="errorLogs.length">
    <el-badge :value="errorLogs.length" class="item" @click.native="dialogVisible=true">
      <el-button icon="el-icon-cpu" size="mini">bugs</el-button>
    </el-badge>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      append-to-body
      title="bugs"
      width="60%">
      <el-button type="primary" @click="clearErrorLogs">清空</el-button>
      <el-table
        :data="errorLogs"
        border
        style="width: 100%">
        <el-table-column
          label="警告信息">
          <template slot-scope="scope">
            <p>msg: <el-tag type="danger">{{ scope.row.err.message }}</el-tag></p>
            <p>url: <el-tag type="warning">{{ scope.row.href }}</el-tag></p>
            <p>info: <el-tag type="info">{{ scope.row.vm.$vnode.tag }} 在 {{ scope.row.info }} 时出错</el-tag></p>
          </template>
        </el-table-column>
        <el-table-column
          prop="href"
          label="Stack">
          <template slot-scope="scope">
            <span> {{ scope.row.err.stack }} </span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ErrorLogs',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      dialogVisible: false,
      value1: null
    }
  },
  computed: {
    errorLogs() {
      return this.$store.getters.errorLogs
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    clearErrorLogs() {
      this.$store.dispatch('errorLog/delErrorLog')
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
div{
    display: inline-block;
}
.el-badge {
    vertical-align: text-bottom;
    ::v-deep .el-badge__content {
        top: 10px;
        right: 10px;
    }
}
</style>
